/**
 * ============================
 * @Author:   liu.dasheng
 * @Version:  1.0
 * @DateTime: 2018-05-03 14:55:58
 * @Function: 首页自定义navigationBar
 * ============================
 */


import React, {Component} from "react";
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {Button} from 'native-base';
import {Body, Header, Left, Right, Title} from "native-base";


import PropTypes from 'prop-types';

export default class TitleBar extends Component {

    static propTypes = {
        leftIcon: PropTypes.number,
        rightIcon: PropTypes.number,
        rightTitle: PropTypes.string,
        leftIconPress: PropTypes.func,
        rightIconPress: PropTypes.func,
        rightTitlePress: PropTypes.func,
    };

    static defaultProps = {
        leftIcon: require('../../images/back.png'),
    };

    render() {
        return (
            <Header style={{backgroundColor: '#fff'}}>
                <Left>
                    <TouchableOpacity onPress={this.props.leftIconPress}>
                        <View style={{width: 40, height: 40, alignItems: 'center', justifyContent: 'center'}}>

                            <Image
                                style={styles.image_header_left}
                                source={this.props.leftIcon}
                            />

                        </View>
                    </TouchableOpacity>

                </Left>
                <Body>
                <Title
                    style={{color: '#000', fontSize: 16}}
                >{this.props.title}</Title>
                </Body>
                <Right>
                    {this._renderRight()}
                </Right>
            </Header>
        )
    }

    /**
     * 根据传入值判断右边渲染文字还是图标
     */
    _renderRight() {
        if (this.props.rightIcon) {
            return (
                <TouchableOpacity onPress={this.props.rightIconPress}>
                    <View style={{width: 40, height: 40, alignItems: 'center', justifyContent: 'center'}}>

                        <Image
                            style={styles.image_header_right}
                            source={this.props.rightIcon}
                        />

                    </View>
                </TouchableOpacity>

            )
        } else if (this.props.rightTitle) {
            return (
                <Button transparent onPress={this.props.rightTitlePress}>
                    <Text style={styles.text_right_title}>
                        {this.props.rightTitle}
                    </Text>
                </Button>
                // </TouchableOpacity>
            )
        }
    }

}

const styles = StyleSheet.create({
    image_header_left: {
        height: 20,
        width: 20,
    },
    image_header_right: {
        height: 20,
        width: 20,
        marginRight: 8,
    },
    text_right_title: {
        color: '#000',
    }
})
